<template>
  <view class="case-detail">
    <!-- 案例基本信息 -->
    <view class="info-section">
      <image :src="case_.image" mode="aspectFill" class="cover-image" />
      <view class="info-card">
        <text class="title">{{ case_.title }}</text>
        <view class="meta">
          <text class="tag">{{ case_.tag }}</text>
          <text class="doctor">主治医师：{{ case_.doctor }}</text>
          <text class="date">{{ case_.date }}</text>
        </view>
      </view>
    </view>
    
    <!-- 患者信息 -->
    <view class="section-card">
      <view class="section-title">患者信息</view>
      <view class="patient-info">
        <view class="info-item">
          <text class="label">性别年龄</text>
          <text class="value">{{ case_.patient.gender }}，{{ case_.patient.age }}岁</text>
        </view>
        <view class="info-item">
          <text class="label">主要症状</text>
          <text class="value">{{ case_.patient.symptoms }}</text>
        </view>
        <view class="info-item">
          <text class="label">病程时间</text>
          <text class="value">{{ case_.patient.duration }}</text>
        </view>
      </view>
    </view>
    
    <!-- 诊疗过程 -->
    <view class="section-card">
      <view class="section-title">诊疗过程</view>
      <rich-text :nodes="case_.process"></rich-text>
      <view class="image-list" v-if="case_.processImages?.length">
        <image 
          v-for="(image, index) in case_.processImages"
          :key="index"
          :src="image"
          mode="aspectFill"
          @tap="previewImage(index, 'process')"
        />
      </view>
    </view>
    
    <!-- 治疗效果 -->
    <view class="section-card">
      <view class="section-title">治疗效果</view>
      <rich-text :nodes="case_.effect"></rich-text>
      <view class="compare-images" v-if="case_.beforeAfter?.length">
        <view class="compare-item" v-for="(item, index) in case_.beforeAfter" :key="index">
          <view class="before">
            <image :src="item.before" mode="aspectFill" @tap="previewCompare(index, 'before')" />
            <text class="label">治疗前</text>
          </view>
          <view class="after">
            <image :src="item.after" mode="aspectFill" @tap="previewCompare(index, 'after')" />
            <text class="label">治疗后</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 患者评价 -->
    <view class="section-card">
      <view class="section-title">患者评价</view>
      <view class="review-card">
        <view class="user-info">
          <image :src="case_.review.avatar" mode="aspectFill" class="avatar" />
          <view class="info">
            <text class="name">{{ case_.review.name }}</text>
            <text class="time">{{ case_.review.time }}</text>
          </view>
          <view class="rating">
            <text class="iconfont icon-star" v-for="n in 5" :key="n"></text>
          </view>
        </view>
        <text class="content">{{ case_.review.content }}</text>
      </view>
    </view>
    
    <!-- 相关项目 -->
    <view class="section-card">
      <view class="section-header">
        <text class="title">相关项目</text>
        <text class="more">查看全部</text>
      </view>
      <scroll-view 
        scroll-x 
        class="project-list"
        :show-scrollbar="false"
      >
        <view 
          class="project-item"
          v-for="(item, index) in case_.relatedProjects"
          :key="index"
          @tap="viewProject(item)"
        >
          <image :src="item.image" mode="aspectFill" class="project-image" />
          <text class="name">{{ item.name }}</text>
          <text class="price">¥{{ item.price }}起</text>
        </view>
      </scroll-view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <button class="action-btn outline" @tap="showConsult">在线咨询</button>
      <button class="action-btn primary" @tap="makeAppointment">立即预约</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 案例详情
const case_ = ref({
  id: 1,
  title: '颈椎病针灸治疗案例',
  tag: '针灸治疗',
  doctor: '张医生',
  date: '2024-03-20',
  image: '/static/tcm/case1.jpg',
  patient: {
    gender: '女',
    age: 45,
    symptoms: '颈部疼痛、头晕、手麻',
    duration: '3个月'
  },
  process: `
    <p style="text-indent: 2em; margin-bottom: 1em;">患者因长期伏案工作，出现颈部疼痛、头晕、双手发麻等症状，经检查诊断为颈椎病。</p>
    <p style="text-indent: 2em; margin-bottom: 1em;">采用针灸配合推拿治疗，主要取穴包括风池、天柱、肩井等穴位，每次治疗约40分钟。</p>
  `,
  processImages: [
    '/static/tcm/process1.jpg',
    '/static/tcm/process2.jpg'
  ],
  effect: `
    <p style="text-indent: 2em; margin-bottom: 1em;">经过8次治疗，患者颈部疼痛明显缓解，头晕、手麻等症状基本消失，颈椎活动度明显改善。</p>
  `,
  beforeAfter: [
    {
      before: '/static/tcm/before1.jpg',
      after: '/static/tcm/after1.jpg'
    }
  ],
  review: {
    name: '张**',
    avatar: '/static/avatar/user1.jpg',
    time: '2024-03-20',
    content: '张医生技术很好，态度也很亲切。经过治疗后，困扰我多时的颈椎问题得到了很大改善，现在工作生活都舒服多了。'
  },
  relatedProjects: [
    {
      id: 1,
      name: '针灸治疗',
      price: 300,
      image: '/static/tcm/acupuncture.jpg'
    },
    {
      id: 2,
      name: '推拿理疗',
      price: 200,
      image: '/static/tcm/massage.jpg'
    }
  ]
})

// 预览图片
const previewImage = (index, type) => {
  const images = case_.value.processImages
  uni.previewImage({
    urls: images,
    current: index
  })
}

// 预览对比图片
const previewCompare = (index, type) => {
  const images = case_.value.beforeAfter.map(item => item[type])
  uni.previewImage({
    urls: images,
    current: index
  })
}

// 查看项目详情
const viewProject = (project) => {
  uni.navigateTo({
    url: `/pages/featured/project?id=${project.id}`
  })
}

// 在线咨询
const showConsult = () => {
  uni.showModal({
    title: '提示',
    content: '是否开始在线咨询？',
    success: (res) => {
      if (res.confirm) {
        // 这里处理在线咨询逻辑
      }
    }
  })
}

// 立即预约
const makeAppointment = () => {
  uni.navigateTo({
    url: `/pages/appointment/department?type=tcm&case=${case_.value.id}`
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const { id } = page.$page?.options || {}
  
  // 这里根据ID加载案例详情
  console.log('加载案例详情:', id)
})
</script>

<style lang="scss">
.case-detail {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 120rpx;
  
  .info-section {
    position: relative;
    
    .cover-image {
      width: 100%;
      height: 400rpx;
    }
    
    .info-card {
      position: relative;
      margin: -60rpx 30rpx 0;
      padding: 30rpx;
      background: #fff;
      border-radius: $radius-lg;
      box-shadow: $shadow-lg;
      
      .title {
        font-size: 36rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .meta {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: $text-secondary;
        
        .tag {
          color: $primary-color;
          background: $primary-light;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
          margin-right: 16rpx;
        }
        
        .doctor {
          margin-right: 16rpx;
        }
      }
    }
  }
  
  .section-card {
    background: #fff;
    margin: 20rpx 30rpx;
    padding: 30rpx;
    border-radius: $radius-lg;
    
    .section-title {
      font-size: 32rpx;
      color: $text-primary;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }
      
      .more {
        font-size: 28rpx;
        color: $text-secondary;
      }
    }
    
    .patient-info {
      .info-item {
        display: flex;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          width: 140rpx;
          font-size: 28rpx;
          color: $text-regular;
        }
        
        .value {
          flex: 1;
          font-size: 28rpx;
          color: $text-primary;
        }
      }
    }
    
    rich-text {
      font-size: 28rpx;
      color: $text-regular;
      line-height: 1.8;
    }
    
    .image-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;
      margin-top: 20rpx;
      
      image {
        width: 100%;
        height: 200rpx;
        border-radius: $radius-lg;
      }
    }
    
    .compare-images {
      margin-top: 20rpx;
      
      .compare-item {
        display: flex;
        gap: 20rpx;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .before,
        .after {
          flex: 1;
          text-align: center;
          
          image {
            width: 100%;
            height: 300rpx;
            border-radius: $radius-lg;
            margin-bottom: 8rpx;
          }
          
          .label {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
      }
    }
    
    .review-card {
      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
        
        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 16rpx;
        }
        
        .info {
          flex: 1;
          
          .name {
            font-size: 28rpx;
            color: $text-primary;
            margin-bottom: 4rpx;
            display: block;
          }
          
          .time {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
        
        .rating {
          .iconfont {
            font-size: 24rpx;
            color: $warning;
            margin-left: 4rpx;
          }
        }
      }
      
      .content {
        font-size: 28rpx;
        color: $text-regular;
        line-height: 1.6;
      }
    }
    
    .project-list {
      white-space: nowrap;
      
      .project-item {
        display: inline-flex;
        flex-direction: column;
        width: 240rpx;
        margin-right: 20rpx;
        
        &:last-child {
          margin-right: 0;
        }
        
        .project-image {
          width: 100%;
          height: 180rpx;
          border-radius: $radius-lg;
          margin-bottom: 12rpx;
        }
        
        .name {
          font-size: 28rpx;
          color: $text-primary;
          margin-bottom: 8rpx;
        }
        
        .price {
          font-size: 26rpx;
          color: $warning;
          font-weight: bold;
        }
        
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    display: flex;
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 30rpx;
      border-radius: $radius-xl;
      
      &.outline {
        color: $primary-color;
        background: #fff;
        border: 2rpx solid $primary-color;
      }
      
      &.primary {
        color: #fff;
        background: $primary-gradient;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style> 